import React from 'react'
import {Outlet,NavLink} from 'react-router-dom'
import { Tabbar } from 'react-vant'
import {mainrouter} from "../router/Router_config"
import {setIcon} from "../global/index"
type Props = {}

const Index = (props: Props) => {
  return (
    <div className='box'>
    <header></header>
    <main><Outlet></Outlet></main>
    <footer>
    <Tabbar>
      {
      mainrouter.map((item,index)=>{
       return <Tabbar.Item icon={setIcon(item.icon)} key={index}>
        <NavLink to={item.path}>{item.title}</NavLink>
       </Tabbar.Item>
      })
      }
      </Tabbar>
    </footer>
    </div>
  )
}

export default Index